<template>
  <div>
    <h1 ref="title">获取HTML的Dom元素</h1>
    <button @click="changeDom">点我更改DOM</button>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
//创建一个ref变量，用于储存ref标记的内容；可以用在普通html标签中（获取DOM元素），也可以用在组件中（组件的实例对象proxy）
const title = ref(); //这边设置的变量title必须与模板中的变量名一致
let a = ref(1);
let b = reactive({ name: "张三" });
function changeDom() {
  title.value.innerText = "修改了DOM";
}
onMounted(() => {
  console.log(title.value); //<h1>获取HTML的Dom元素</h1>
});
defineExpose({ a, b, changeDom }); //子组件的数据defineExpose暴露变量给父组件使用
</script>

<style scoped></style>
